<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--react的核心库-->
    <script src="build/react.js" charset="utf-8"></script>
    <!--提供与dom相关的功能-->
    <script src="build/react-dom.js" charset="UTF-8"></script>
    <!--将jsx语法转换成javascript语法-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" charset="UTF-8"></script>
</head>
<body>
<!--react渲染的模板内容会插入到dom节点中，作为一个容器-->
<div id="container"></div>
</body>
<!--在react开发中使用jsx，与javascript不兼容，在使用jsx的地方，要设置type="text/label"-->
<!--label是一个转换编辑器，ES6转成可以在浏览器中运行的代码-->
<script type="text/babel">
    //在此处编写react内容
//事件处理，react中的时间名称，首字母小些，驼峰命名法
  /*  var MyButton=React.createClass({
        handleClick:function () {
            alert("点击按钮触发的效果");
        },
        render:function () {
            return(
                <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
            );
        }
    });
    ReactDOM.render(
        <MyButton buttonTitle="按钮"/>,
        document.getElementById("container")
    );*/
  //state状态，props 组件自身属性  this.state
    //需求：创建一个CheckButtom的组件，包含一个checkbox类型<input>,选中和未选中两种状态下显示不同的文字
    //当state发生变化时，会调用组件内部的render方法
  /*  var CheckButton=React.createClass({
        getInitialState:function () {
            return{
                //在这个对象中设置的属性，将会存储在state中
                //默认状态，未选中
                isCheck:false
            }
        },
        //定义事件绑定方法
        handleChange:function () {
            //通过this.state读取设置的状态值
            this.setState({
                isCheck:!this.state.isCheck
            });
        },
        render:function () {
            //根据状态值设置显示的文字
            //在jsx语法中，不能直接使用if,else,使用三目标运算符
            var text=this.state.isCheck? "已选中":"未选中";
            return(
                <div>
                    <input type="checkbox" onChange={this.handleChange}/>
                    {text}
                </div>
            );
        }
    });
    ReactDOM.render(
        <CheckButton/>,
        document.getElementById("container")
    );*/
  //需求：定义一个组件，将用户在输入框内输入的内容进行实时显示。分析：组件与用户交互过程中，存在状态的变化，即输入框的值

  var Input=React.createClass({
      getInitialState:function () {
          return{
              value:"请输入"
          };
      },
      handleChange:function (event) {
          this.setState({
              value:event.target.value
          });
      },
      render:function () {
          var value=this.state.value;
          return(
              <div>
                  <input type="text" value={value} onChange={this.handleChange}/>
                  <p>{value}</p>
              </div>
          );
      }
  });
  ReactDOM.render(
      <Input/>,
    document.getElementById("container")
  );
</script>
</html>